<script lang="ts" setup>
import { carTypeMap, subjectMap } from "./common";
import dayjs from "dayjs";
import { CarType, Subject } from "@/types/practice";
import * as PaperApi from "@/api/train/paper";
import { PaperRecord } from "@/api/train/paper";

const props = defineProps<{
  paperId: string;
}>();

const paperRecord = ref<PaperRecord | null>(null);
PaperApi.getPaperRecordByPaperId(props.paperId).then((res) => (paperRecord.value = res.data));

// 统计数据
const statistics = computed(() => [
  {
    title: "用时",
    value: dayjs((paperRecord.value?.duration || 0) * 1000).format("mm:ss"),
  },
  {
    title: "车型",
    value: carTypeMap[paperRecord.value?.carType || CarType.C1],
  },
  {
    title: "科目",
    value: subjectMap[paperRecord.value?.subject || Subject.ONE],
  },
]);
</script>

<template>
  <div class="min-h-screen relative p-4 bg-gray-1">
    <!-- 统计面板 -->
    <div class="bg-white p-5 rd-3 shadow">
      <nut-circle-progress class="mx-auto" :progress="paperRecord?.score" stroke-width="10" radius="80">
        <div class="flex flex-col items-center gap-2">
          <div class="c-gray-7">
            <span class="text-4xl">{{ paperRecord?.score }}</span> <span class="text-sm">分</span>
          </div>
          <div class="px-2 py-0.5 text-sm rd-1"
            :class="[paperRecord?.passed ? 'bg-green-2 c-green-7' : 'bg-red-2 c-red-7']">
            {{ paperRecord?.passed ? "已" : "未" }}通过
          </div>
        </div>
      </nut-circle-progress>
      <div class="mt-5 flex justify-between">
        <div v-for="item in statistics" :key="item.title" class="flex flex-col items-center gap-1">
          <span>{{ item.value }}</span>
          <span class="text-sm c-gray-5">{{ item.title }}</span>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="absolute bottom-0 left-0 right-0">
      <div class="flex justify-center gap-4 p-4">
        <button class="w-full py-2 text-sm rd-full bg-white shadow" @click="$router.back()">返回首页</button>
        <!-- <button class="w-1/2 py-2 text-sm rd-full bg-green-5 c-white shadow" @click="$router.push('/train')">查看错题</button> -->
      </div>
    </div>
  </div>
</template>
